<template>
  <div class="homepage-wrapper">

    <div class="header-section">
      <h1 class="page-title">味蕾漫游站</h1>
      <p class="page-subtitle">解锁城市美味密卷，发现周围美食秘密档案！</p>
    </div>
    <div class="sellers-container">
      <div
          v-for="(seller, index) in sellers"
          :key="index"
          class="seller-card-wrapper"
          @click="router.push({
          path: '/sjcaipin',
          query: {
            sjid: seller.sjInfo.sjid
          }
        })">
        <seller-card
            :cp-list="seller.cpList"
            :sj-info="seller.sjInfo"
        ></seller-card>
      </div>
    </div>

    <div class="loading-section">
      <p v-if="loading" class="loading-text">
        <el-icon class="is-loading"><Loading /></el-icon>
        美味加载中...
      </p>
      <p v-if="noMore" class="no-more-text">没有更多商家了</p>
    </div>

    <!-- 滚动加载的触发元素 -->
    <div class="sentinel" ref="sentinelRef"></div>
  </div>
</template>

<script lang="ts" setup>
import SellerCard from './SellerCard.vue'
import {computed, onMounted, onUnmounted, ref, watch} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "../../router";
import {Loading} from '@element-plus/icons-vue'
import {useRoute} from 'vue-router'


const limit = ref(6);
const loading = ref(false)
const noMore = computed(() => limit.value >= 50)
const sellers = ref([])
const sentinelRef = ref(null)
const keyword = ref('')

const route = useRoute()
onMounted(() => {
  if (route.query.keyword) {
    keyword.value = route.query.keyword
  }
  doSjList();
  initIntersectionObserver();
})

const doSjList = async () => {
  sellers.value = []
  try {
    console.log(keyword.value)
    const { data } = await axios.get(`/api/yhview/${keyword.value || '全部'}/${limit.value}`)
    if (data.code === 200) {
      sellers.value = data.data
    }
  } catch (error) {
    ElMessage.error('加载商家信息失败')
  }
}

watch(() => route.query.key, (newKeyword) => {
  if (newKeyword !== undefined) {
    keyword.value = newKeyword as string
    doSjList()
  }
})

const load = async () => {
  if (loading.value || noMore.value) return;

  loading.value = true
  const oldLimit = limit.value;
  limit.value = Math.min(limit.value + 6, 50);

  try {
    const {data} = await axios.get('/api/yhview/' + limit.value)
    if (data.code === 200) {
      sellers.value = data.data
    } else {
      limit.value = oldLimit;
    }
  } catch (error) {
    limit.value = oldLimit;
  } finally {
    loading.value = false
  }
}

// 使用 Intersection Observer 实现更流畅的无限滚动
let observer: IntersectionObserver | null = null

const initIntersectionObserver = () => {
  if (sentinelRef.value) {
    observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting && !loading.value && !noMore.value) {
        load()
      }
    }, {
      rootMargin: '100px'
    })
    observer.observe(sentinelRef.value)
  }
}

onUnmounted(() => {
  if (observer) {
    observer.disconnect()
  }
})
</script>

<style scoped>
.homepage-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  position: relative;
}

.header-section {
  text-align: center;
  margin-bottom: 30px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.page-title {
  font-size: 2rem;
  font-weight: 700;
  color: #e74c3c;
  margin-bottom: 8px;
  margin-top:6px;
  font-family: AIGDT;
}

.page-subtitle {
  font-size: 1rem;
  color: #7f8c8d;
    margin-top: 6px;
    margin-bottom: 6px;
}

.sellers-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 25px;
  margin-bottom: 30px;
}

.seller-card-wrapper {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
}

.seller-card-wrapper:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.loading-section {
  text-align: center;
  padding: 20px 0;
}

.loading-text {
  font-size: 1rem;
  color: #7f8c8d;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.no-more-text {
  font-size: 1rem;
  color: #95a5a6;
}

.sentinel {
  height: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .homepage-wrapper {
    padding: 15px;
  }

  .sellers-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .header-section {
    padding: 15px 10px;
    margin-bottom: 20px;
  }

  .page-title {
    font-size: 1.7rem;
  }
}
</style>
